<template>
	<el-table :data="result.list" border height="96%" :cell-style="TableCellStyle" :header-cell-style="{color:'#000000',background:'#DCDCDC'}">
		<el-table-column prop="issue_id" label="问题序号" width="auto" align="center"></el-table-column>
		<el-table-column prop="job_id" label="提出人工号" width="auto" align="center"></el-table-column>
		<el-table-column prop="name" label="姓名" width="auto" align="center"></el-table-column>
		<el-table-column prop="detail" label="问题描述" width="auto" :formatter="stateFormat" align="center"></el-table-column>
		<el-table-column prop="state" label="问题状态" width="auto" align="center"></el-table-column>
		<el-table-column prop="date" label="提出时间" width="auto" align="center"></el-table-column>	
		<el-table-column prop="picture" label="详情" width="auto" align="center">
			<template #default="scope">
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="success"
						@click="explanationList=scope.row.explanation,pictureList=scope.row.picture,detailform.issue_id=scope.row.issue_id,
						message0=scope.row.detail,pictureDetail()">查看
					</el-button>
				</el-row>
			</template>
		</el-table-column>
		<el-table-column label="经费申请理由" width="auto" align="center">
			<template #default="scope">
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="success"
						@click="detailform.issue_id=scope.row.issue_id,queryMessage(scope.row.detail),detailVisible = true">详情
					</el-button>
				</el-row>
			</template>
		</el-table-column>
		<!-- 删除操作以及其他操作 -->
		<el-table-column label="操作" width="210%" align="center">
			<template #default="scope">
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="success" style="margin-bottom: 10px" id="apply_fund_success"
						@click="applyFundForm.issue_id = scope.row.issue_id,addFormVisible = true">审核通过
					</el-button>
				</el-row>
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="danger" id="apply_fund_fail"
						@click="applyFundForm.issue_id = scope.row.issue_id,applyFundFormVisible = true">审核不通过
					</el-button>
				</el-row>
			</template>
		</el-table-column>
	</el-table>

	<div class="block">
		<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
			:page-size="searchParam.onePageCount" :total="result.total">
		</el-pagination>
	</div>

	<!-- 审核通过 -->
	<el-dialog v-model="addFormVisible" title="确认审核通过" width="65%" height="50%">
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addFormVisible = false" class="left-btn">取消</el-button>
				<el-button type="primary" @click="addFormVisible = false,ApproveProblem(true)" id="apply_fund_success_confirm">确定</el-button>
			</span>
		</template>
	</el-dialog>

	<el-dialog v-model="applyFundFormVisible" title="请填写审核不通过理由" width="65%" height="50%">
		<el-form :model="applyFundForm" class="fl">
			<el-form-item label="理由">
				<el-input v-model="applyFundForm.detail" autocomplete="off" type="textarea" autosize="{ minRows: 1 maxRows: 100}"/>
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="applyFundFormVisible = false" class="left-btn">取消</el-button>
				<el-button type="primary" @click="ApproveProblem(false)" id="apply_fund_fail_confirm">确定</el-button>
			</span>
		</template>
	</el-dialog>

	<!-- 原因 -->
	<el-dialog v-model="detailVisible" title="详情" width="65%" height="50%">
		<el-form :model="detailform" class="fl">

			<el-form-item v-if="message2===''&&message3===''">
				<div id="app" style="text-align: center;font-size: 25px;">
					暂无 
				</div>
			</el-form-item>
			
			<el-form-item v-if="message2!==''" label="上一次经费审核不通过原因：">
				<div id="app" style="text-align: left;">
					<p>{{message2}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message3!==''" label="本次经费申请详情：">
				<div id="app" style="text-align: left;">
					<p>{{message3}}</p>
				</div>
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="detailVisible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script>
import { ElMessage } from "element-plus"
	import axios from "axios"
	export default {
		data() {
			return {
				searchParam: {
					currentpage: 1,
					onePageCount: 8
				},
				result: [],
				applyFundFormVisible: false,
				applyFundForm: {
					issue_id:'',
					detail: ''
				},
				addFormVisible: false,		
				detailVisible: false,
				detailform:{
					issue_id:''
				},
				message0:'',
				message2:'',
				message3:'',
				pictureList:[],
				explanationList:[],
				pictureVisible: false,
			}
		},
		methods: {
			pictureDetail(){
				localStorage.setItem("pictureList",JSON.stringify(this.pictureList))
				localStorage.setItem("explanationList",JSON.stringify(this.explanationList))
				localStorage.setItem("explanation",this.message0)
				this.$router.push({
					path: '/home_manager/list_picture'
				})
			},
			stateFormat(row, column, cellValue) {
				// console.log(row , column , cellValue)
				if (!cellValue) return "";
				if (cellValue.length > 8) {
					//最长固定显示4个字符
					return cellValue.slice(0, 8) + "...";
				}
				return cellValue;
			},
			onSubmit(currentpage) {
				this.searchParam.currentpage = currentpage;
				axios.post("/api/issues_manager/getfund", {
						"pageNum": this.searchParam.currentpage,
						"pageSize": this.searchParam.onePageCount
					}, {
						headers: {
							'Authorization': sessionStorage.getItem('authtoken')
						}
					})
					.then(res => {
						this.result = res.data.result;
					})
					.catch(error => {
						console.log(error)
					}
				);
			},
			handleCurrentChange(val) {
				this.onSubmit(val)
			},
			ApproveProblem(state){
				if(state){
					axios.post("/api/issues_manager/updatefund", {
							"issue_id":this.applyFundForm.issue_id,
							"state":"待维修",	
						}, {
							headers: {
								'Authorization': sessionStorage.getItem('authtoken')
							}
						})
						.catch(error => {
							console.log(error)
						}
					);
				} else{
					if(this.applyFundForm.detail==''){
						ElMessage.error({
							message: "请输入审核不通过的理由",
							type: "success",
						})
						return
					}
					axios.post("/api/issues_manager/updatefund", {
							"issue_id":this.applyFundForm.issue_id,
							"state":"经费申请未通过",	
							"reason":this.applyFundForm.detail
						}, {
							headers: {
								'Authorization': sessionStorage.getItem('authtoken')
							}
						})
						.catch(error => {
							console.log(error)
						}
					);
					applyFundFormVisible = false
				}
			},
			queryMessage(description) {
				axios.post("/api/issues_employee/querymessage", {
						"issue_id":this.detailform.issue_id,
					}, {
						headers: {
							'Authorization': sessionStorage.getItem('authtoken')
						}
					})
					.then(res => {
						this.message0 = description
						this.message2 = res.data.result.unfund_reason
						this.message3 = res.data.result.applyfund_reason
					})
					.catch(error => {
						console.log(error)
					}
				);
			},
		},
		mounted() {
			this.onSubmit(1);
		}
	}
</script>

<style lang="scss">
	.fr {
		float: right;
	}

	.fl {
		text-align: left;
	}
</style>
